<div id="comparti-tu-punto-page" class="container comparti-tu-punto-container only-section-container">
    <div class="row">
        <section id="comparti-tu-punto-container" class="span12 box-container">
            <header class="box-header">
                <span class="border-width bg-color-02"></span>
                <i class="fa fa-map-marker header-icon font-color-02"></i>
                <h2>Carg&aacute; un punto de reciclaje</h2>
<!--                <a class="aside btn-mobile btn-collapse" href="#"><span class="icons-collapse icon-collapse-down"></span></a>-->
            </header>

            <div class="row-fluid section-content">
                <p class="section-para">Un <b>punto de reciclaje</b> es un lugar donde se recibe por lo menos un tipo de material para ser reutilizado, reciclado, o acopiado. Pueden ser contenedores designados, particulares, comercios y dem&aacute;s.</p>
                <p class="section-para">La carga de un nuevo punto debe ser realizada por un <b>responsable</b> a cargo del mismo. Invitamos a que completes el siguiente formulario para que tu comunidad te conozca. Vas a recibir un email cuando est&eacute; publicado el punto en el mapa de <b>DondeReciclo.org</b>.</p>
                
                <!-- <?php if (!isset($usuario)) {?>
                <div class="banner comparti-tu-punto-banner">
                    <p><span class="icons icon-add-green-marker"></span>Para cargar un punto de reciclado debes ingresar con tu usuario. Si no ten&eacute;s uno podes <a href="<?php echo base_url(); ?>crea-tu-cuenta" class="font-color-16">crear tu cuenta</a>.</p>
                </div>
                <?php } ?> -->
            </div>
            
            <?php //if (isset($usuario)) {?>
            <div class="row-fluid section-content">
                <h3 class="section-title"><i class="fa  fa-file-text header-icon font-color-02"></i>&nbsp; &nbsp;Complet&aacute; con los datos del <em class="font-color-02">punto de reciclaje</em></h3>
                <form id="comparti-tu-punto-form" method="post" action="<?php echo base_url(); ?>controllers/compartir/save">
                    <div class="row-fluid">
                        <label for="geolocalizacion" class="field-container lugar-nombre-field span6">
                            <b class="title span">Ubicaci&oacute;n<span id="errorCoordenadas"></span></b>Ingres&aacute; una direcci&oacute;n.<br>
                            <input type="text" value="" name="geolocalizacion" id="geolocalizacion" class="field span8" placeholder="Ej: Av Santa Fe 2002, Buenos Aires"/>
                            <a id="bnt-buscar" class="btn btn-green"><i class="fa fa-search" style="margin-top: 4px;"></i></a>
                            <input type="hidden" value="" name="coordenadas" id="coordenadas" />
                        </label>                        
                    </div>
                    <div class="alert alert-error hide" id="alertNoMarker">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        No se encontr&oacute; nin&uacute;n punto con esa direcci&oacute;n. Por favor intente otra vez.
                    </div>
                    <div class="alert hide" id="alertHelper">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        Si el punto no coincide exactamente con la direcci&oacute;n lo pod&eacute;s arrastrar al lugar correcto usando el mouse.
                    </div>
                    <div class="alert hide" id="alertManyMarkers">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        Se encontr&oacute; m&aacute;s de un punto. Hac&eacute; click en el que corresponda.
                        Si el punto no coincide exactamente con la direcci&oacute;n lo pod&eacute;s arrastrar al lugar correcto usando el mouse.
                    </div>
                    <div class="row-fluid">
                        <div class="span12" id="map" style="height: 350px"></div>
                    </div>
                    <div class="row-fluid">
                        <label for="lugar-nombre-field" class="field-container lugar-nombre-field span6">
                            <b class="title span">Nombre del lugar</b>
                            <input type="text" value="" name="nombre" id="lugar-nombre-field" class="field span"/>
                        </label>
                        <label for="lugar-email-field" class="field-container lugar-email-field span6">
                            <b class="title span">Mail del lugar</b>
                            <input type="text" value="" name="email" id="lugar-email-field" class="field span"/>
                        </label>
                    </div>
                    <div class="row-fluid">
                        <label for="calle-field" class="field-container calle-field span4">
                            <b class="title span">Calle</b>
                            <input type="text" value="" name="calle" id="calle-field" class="field span"/>
                        </label>
                        <label for="altura-field" class="field-container altura-field span1">
                            <b class="title span">Altura</b>
                            <input type="text" value="" name="numero" id="altura-field" class="field span"/>
                        </label>
                        <label for="piso-field" class="field-container piso-field span1">
                            <b class="title span">Piso</b>
                            <input type="text" value="" name="piso" id="piso-field" class="field span"/>
                        </label>
                        <label for="horarios-field" class="field-container horarios-field span3">
                            <b class="title span">Horarios <em>(D&iacute;as, rango horario)</em></b>
                            <input type="text" value="" name="horario" id="horarios-field" class="field span"/>
                        </label>
                        <label for="telefono-field" class="field-container telefono-field span3">
                            <b class="title span">Tel&eacute;fono</b>
                            <input type="text" value="" name="telefono" id="telefono-field" class="field span"/>
                        </label>
                    </div>
                    <div class="row-fluid">
                        <label for="provincia-field" class="field-container provincia-field span3">
                            <b class="title span">Provincia</b>
                            <?php echo(Provincia::toSelect()); ?>
                        </label>
                        <!--<label for="partido-field" class="field-container partido-field span3">
                            <b class="title span">Partido</b>
                            <select id="selectDepartamento" disabled="disabled">
                                <option value="">Elegir</option>
                            </select>
                        </label>-->
                        <label for="localidad-field" class="field-container localidad-field span3">
                            <b class="title span">Localidad</b>
                            <select id="selectLocalidad" disabled="disabled">
                                <option value="">Elegir</option>
                            </select>
                        </label>
                        <label for="web-field" class="field-container web-field span3">
                            <b class="title span">Web</b>
                            <input type="text" value="" name="web" id="web-field" class="field span"/>
                        </label>
                    </div>
                    <div class="row-fluid">
                        <label class="field-container">
                            <b class="title span">&iquest;Qu&eacute; materiales reciben? <em>(Ej. carton, pl&aacute;stico, vidrio)</em></b>
                        </label>
                        <p id="errorCategorias"></p>
                        <ul class="category-list row">
                            
                        </ul>
                    </div>
                    <div class="row-fluid">
                        <?php echo(Subcategoria::toNav(Estado::visible()->id)) ?>
                    </div>
                    <div class="row-fluid">
                        <label for="quienes-field" class="field-container quienes-field">
                            <b class="title span">&iquest;Qui&eacute;nes son?</b><br/>
                            <textarea name="quienes" id="quienes-field" class="field span"></textarea>
                        </label>
                    </div>
                    <div class="row-fluid">
                        <label for="que-field" class="field-container que-field">
                            <b class="title span">&iquest;Qu&eacute; hacen con los residuos?</b><br/>
                            <textarea name="que" id="que-field" class="field span"></textarea>
                        </label>
                    </div>
                    <!--<div class="row-fluid">
                        <label for="porque-field" class="field-container porque-field">
                            <b class="title span">&iquest;Por qu&eacute; lo hacen?</b><br/>
                            <textarea name="porque" id="porque-field" class="field span"></textarea>
                        </label>
                    </div>-->
                    <div class="row-fluid">
                        <label for="observaciones-field" class="field-container observaciones-field">
                            <b class="title span">Observaciones <em>(Descripci&oacute;n, comentarios, etc.)</em></b><br/>
                            <textarea name="comentario" id="observaciones-field" class="field span"></textarea>
                        </label>
                    </div>
                </form>
                <div class="row-fluid">
                    <div class="span12" style="text-align: center;">
                        <a href="javascript:void(0);"  class="btn btn-green btn-submit" id="cargar-tu-punto-btn"><i class="fa fa-check fa-2x"></i>&nbsp;&nbsp;<span class="text">Enviar</span></a>
                   </div>
                </div>
                
            </div>
            <?php //} ?>
        </section>
    </div>
</div>

<div id="myModal" class="modal hide fade">
    <div class="modal-header">
	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	<h3>Gracias!/h3>
    </div>
    <div class="modal-body">
	<p>En breve nos ponemos en contacto para dar de alta el punto.</p>
    </div>
</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>